<template>
  <div class="app-container">
    <el-row ref="headerRow"><slot /></el-row>
    <div class="top">
      <el-button size="small" @click="search">刷新</el-button>
      <el-button
        type="primary"
        size="mini"
        class="ml5"
        @click="dealWith()"
      >添加</el-button>
    </div>
    <div class="search">
      <el-input
        v-model="searchData.devIMEI"
        placeholder="请输入IMEI"
        clearable
        class="etag"
        size="mini"
      />
      <el-input
        v-model="searchData.meeting_num"
        placeholder="请输入会议号"
        clearable
        class="etag"
        size="mini"
      />
      <el-input
        v-model="searchData.proposer"
        placeholder="请输入申请人"
        clearable
        class="etag"
        size="mini"
      />
      <el-button
        type="primary"
        size="mini"
        class="ml5"
        @click="search"
      >查询</el-button>
    </div>
    <div class="table">
      <el-table
        ref="theTable"
        element-loading-text="加载中"
        fit
        stripe
        empty-text="暂无数据"
        :height="windowHeight - 175 - headerHeight + 'px'"
        :data="tableData.records"
        border
        highlight-current-row
        @sort-change="onSort"
        @current-change="handleTableCurrentChange"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column prop="onlineLabel" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index + (searchData.curPage - 1) * searchData.pageSize + 1
            }}</template
          >
        </el-table-column> -->
        <!-- <el-table-column prop="devIMEI" label="上报时间">
          <template slot-scope="scope">
            {{ scope.row.createtime | formatDateHM }}
          </template>
        </el-table-column> -->
        <el-table-column prop="devIMEI" label="imei">
          <template slot-scope="scope"> {{ scope.row.devIMEI }}</template>
        </el-table-column>
        <el-table-column prop="meetingNum" label="会议号">
          <template slot-scope="scope"> {{ scope.row.meetingNum }}</template>
        </el-table-column>
        <el-table-column prop="proposer" label="申请人">
          <template slot-scope="scope"> {{ scope.row.proposer }}</template>
        </el-table-column>
        <el-table-column prop="picture" label="图片">
          <template slot-scope="scope"> {{ scope.row.picture }}</template>
        </el-table-column>
        <el-table-column prop="orderTime" label="时间">
          <template slot-scope="scope"> {{ scope.row.orderTime }}</template>
        </el-table-column>
      </el-table>
    </div>
    <el-row>
      <el-col :span="8">
        <el-pagination
          :current-page.sync="searchData.curPage"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="searchData.pageSize"
          layout="sizes, prev, pager, next"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <el-dialog title="添加" :visible.sync="dialogTableVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="IMEI">
          <el-input v-model="form.devIMEI" />
        </el-form-item>
        <el-form-item label="图片选择">
          <el-radio v-model="form.picture" label="1">图片a</el-radio>
          <el-radio v-model="form.picture" label="2">图片b</el-radio>
          <el-radio v-model="form.picture" label="3">图片c</el-radio>
        </el-form-item>
        <el-form-item label="会议号">
          <el-input v-model="form.meetingNum" />
        </el-form-item>
        <el-form-item label="申请人">
          <el-input v-model="form.proposer" />
        </el-form-item>
        <el-form-item label="会议时间">
          <el-time-select
            v-model="form.startTime"
            placeholder="起始时间"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '24:00',
            }"
          />
          <el-time-select
            v-model="form.endTime"
            placeholder="结束时间"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '24:00',
              minTime: form.startTime,
            }"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">添加</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getWorkOrderList, getWorkOrderHandle } from '@/api/conference'
import { batchDel, mergeQuerrys } from '@/utils'
export default {
  data() {
    return {
      cache: {},
      form: {
        devIMEI: '',
        meetingNum: '',
        proposer: '',
        picture: '',
        orderTime: '',
        startTime: '',
        endTime: ''
      },
      dialogTableVisible: false,
      searchData: {
        column: '',
        curPage: 1,
        pageSize: 20,
        order: ''
      },
      windowHeight: window.innerHeight,
      headerHeight: 0,
      a: 1,
      tableData: {
        total: 0
      },
      type: 0
    }
  },
  mounted() {
    this.search()
    this.$nextTick(() => {
      window.addEventListener('resize', this.onResize)
      this.headerHeight = this.$refs.headerRow.$el.offsetHeight
      // console.log('headerHeight', this.$refs, this.$refs.headerRow, this.headerHeight)
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
  },
  methods: {
    // go(e) {
    //   this.$router.push({ path: `/station/detail/${e.stationId}` });
    // },
    onSubmit() {
      this.form.orderTime = `${this.form.startTime}-${this.form.endTime}`
      getWorkOrderHandle(this.form).then((ret) => {
        console.log(ret)
        this.dialogTableVisible = false
        this.search()
      })
    },
    cancel() {
      this.dialogTableVisible = false
    },
    dealWith() {
      this.dialogTableVisible = true
    },
    handleCurrentChange() {
      this.search()
    },
    handleSizeChange(e) {
      console.log(e)
      this.searchData.pageSize = e
      console.log()
      this.search()
    },
    search() {
      const keyDefs = [
        { key: 'devIMEI', matchType: 'like' },
        { key: 'meetingNum', matchType: 'like' },
        { key: 'proposer', matchType: 'like' }
      ]
      getWorkOrderList(mergeQuerrys(keyDefs, this.searchData)).then((ret) => {
        console.log('ret', ret)
        this.tableData = ret.data
      })
    },
    onResize() {
      this.windowHeight = window.innerHeight
    },
    onSort({ column, prop, order }) {},
    // 当前选中项改变
    handleTableCurrentChange(val) {
      console.log(val)
    },
    // 当前选中项改变（多选）
    handleSelectionChange(val) {
      console.log(val)
    }
  }
}
</script>
  <style>
.etag {
  width: 170px;
  margin-right: 5px;
}

.search {
  margin-top: 8px;
}

.table {
  margin-top: 5px;
}
</style>
